<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区块链浏览器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-900">
    <div id="app" class="max-w-4xl mx-auto p-6">
        <h1 class="text-3xl font-bold mb-4">区块链浏览器</h1>

        <!-- 搜索框组件 -->
        <search-bar v-model="searchQuery"></search-bar>

        <!-- 区块列表组件 -->
        <block-list :blocks="filteredBlocks"></block-list>

        <!-- 分页组件 -->
        <pagination v-model:current-page="currentPage" :per-page="perPage"></pagination>
    </div>

    <script>
        const { createApp, ref, computed, onMounted } = Vue;

        const SearchBar = {
            props: ['modelValue'],
            template: `
                <input 
                    type="text" 
                    placeholder="搜索区块编号或哈希..." 
                    class="border rounded p-2 mb-4 w-full"
                    :value="modelValue"
                    @input="$emit('update:modelValue', $event.target.value)"
                />
            `
        };

        const BlockList = {
            props: ['blocks'],
            template: `
                <ul class="space-y-3">
                    <li v-for="block in blocks" :key="block.index" class="bg-white p-4 rounded-lg shadow">
                        <span class="font-bold">区块 #{{ block.index }}</span> - 
                        <span class="text-sm text-gray-500">{{ block.hash }}</span>
                        <a :href="'/block/' + block.index" class="text-blue-600 hover:underline">查看详情</a>
                    </li>
                </ul>
            `
        };

        const Pagination = {
            props: ['modelValue', 'perPage'],
            template: `
                <div class="mt-4 flex justify-between">
                    <button
                        v-if="modelValue > 1"
                        @click="$emit('update:modelValue', modelValue - 1)"
                        class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
                    >
                        上一页
                    </button>

                    <span class="text-gray-700">当前第 {{ modelValue }} 页</span>

                    <button
                        @click="$emit('update:modelValue', modelValue + 1)"
                        class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
                    >
                        下一页
                    </button>
                </div>
            `
        };

        createApp({
            components: { SearchBar, BlockList, Pagination },
            setup() {
                const searchQuery = ref('');
                const currentPage = ref(1);
                const perPage = ref(10);
                const blocks = ref([]);

                // 获取区块数据
                const fetchBlocks = async () => {
                    const url = `/blocks?page=${currentPage.value}&per_page=${perPage.value}&query=${searchQuery.value}`;
                    const res = await fetch(url);
                    blocks.value = await res.json();
                };

                onMounted(fetchBlocks);
                
                const filteredBlocks = computed(() => blocks.value);

                return { searchQuery, currentPage, perPage, filteredBlocks };
            }
        }).mount('#app');
    </script>
</body>
</html>
